<script setup>
import { ref } from "vue";
import { useRoute } from "vue-router";
import { getSearchList } from "../../apis/music";
import { createWindow } from "../../utils/ipcRenderer";

const route = useRoute();
const albumList = ref([]);
const loading = ref(false)
const count = ref();
const currentPage = ref(1);
const getInit = async (page) => {
  loading.value = true
  let res2 = await getSearchList(route.params.keyword, 20, (page - 1) * 20, 10);
  currentPage.value = page;
  albumList.value = res2.result.albums;
  count.value = res2.result.albumCount;
  loading.value = false
};
getInit(1);

const handleAlbum = (id) => {
  createWindow({
    windowName: "albumDetail",
    path: "albumDetail",
    width: 1200,
    height: 820,
    param: { id: id },
  });
};
</script>
<template>
  <div v-loading="loading"  class="singer_album">
    <el-scrollbar heigt="100%">
      <div class="title">搜索 专辑 "{{ route.params.keyword }}"</div>
      <div class="content_wrap">
        <div class="content">
          <div
            v-for="(item, index) in albumList"
            :key="index"
            style="position: relative"
            class="image"
          >
            <div @click="handleAlbum(item.id)" class="image_wrap">
              <el-image
                fit="cover"
                lazy
                :src="
                  item.picUrl
                    ? item.picUrl + `${'?param=300y300'}}`
                    : item.coverImgUrl + `${'?param=300y300'}}`
                "
              >
                <template #placeholder>
                  <div class="image-slot">
                    Loading<span class="dot">...</span>
                  </div>
                </template>
              </el-image>
            </div>

            <span class="name">{{ item.name }}</span>
            <span>{{ item.artist.name }}</span>
          </div>
        </div>
      </div>
      <div class="pagination">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="Math.ceil(count / 20) * 10"
          :pager-count="10"
          @current-change="getInit"
          :current-page.sync="currentPage"
        >
        </el-pagination>
      </div>
    </el-scrollbar>
  </div>
</template>

<style lang="scss" scoped>
.singer_album {
  height: 100%;
  .title {
    font-size: 30px;
    height: 40px;
    line-height: 40px;
    margin-bottom: 40px;
    font-weight: 600;
  }
  .content_wrap {
    position: relative;

    .content {
      display: grid;
      justify-content: space-around;
      grid-template-columns: repeat(auto-fill, 16vw);

      .image {
        margin-bottom: 45px;

        .image_wrap {
          position: relative;
          height: 15vw;

          .el-image {
            height: 100%;
            border-radius: 10px;
          }
        }
      }

      .name {
        display: block;
        font-size: 16px;
        font-weight: 600;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }

    .more {
      font-size: 18px;
      font-weight: 600;
      display: flex;
      justify-content: center;
      align-items: center;

      div {
        cursor: pointer;
        background-color: #f7f7f9;
        padding: 10px 20px;
        color: #393939;
        border-radius: 10px;
        transition: 0.5s;

        &:active {
          transform: scale(1.1);
        }
      }
    }
  }
}
</style>
